<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--定义住院病历模板片段-->
<div th:fragment="in-hospital-record-template">
    <form id="in-hospital-record-form" class="form-horizontal" >
        <fieldset>
            <div class="form-group">
                <div class="control-group">
                    <label class="control-label" for="patientName">患者姓名</label>
                    <div class="controls">
                        <input name="patientName" data-for-template="patientName" type="text" th:value="${medicalRecord.patientName}" class="input-xlarge" id="patientName" disabled/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="control-group">
                    <label class="control-label" for="inDiag">入院诊断</label>
                    <div class="controls">
                        <input name="inDiag"  type="text" class="input-xlarge" id="inDiag" data-for-template="inDiag" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="control-group">
                    <label class="control-label" for="inIllness">入院病情</label>
                    <div class="controls">
                        <textarea name="inIllness" class="form-control" id="inIllness" data-for-template="inIllness"></textarea>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="control-group">
                    <label class="control-label" for="diagType">诊断类型</label>
                    <div class="controls">
                        <select id="diagType">
                            <option value=""></option>
                            <option value="1">主要诊断</option>
                            <option value="2">次要诊断</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="control-group">
                    <label class="control-label" for="checkType">检查方法</label>
                    <div class="controls">
                        <div class="checkbox">
                            <label><input id="checkType1" name="checkType" data-for-template="checkType" type="checkbox" value="1">彩超</label>
                        </div>
                        <div class="checkbox">
                            <label><input id="checkType2" name="checkType" data-for-template="checkType" type="checkbox" value="2">PACS</label>
                        </div>
                        <div class="checkbox">
                            <label><input id="checkType3" name="checkType" data-for-template="checkType" type="checkbox" value="3">超声</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="control-group">
                    <label class="control-label" for="gender">性别</label>
                    <div class="controls">
                        <div class="radio">
                            <label>
                                <input type="radio" data-for-template="gender" name="gender" id="gender1" value="1" checked> 男
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" data-for-template="gender" name="gender" id="gender2" value="2">女
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">

                <div class="control-group">

                    <label class="control-label" for="patientImage">身体部位</label>
                    <div class="controls">
                        <div class="btn-group">
                            <button class="btn" onclick="addWidth(0);return false;">加宽</button>
                            <button class="btn" onclick="addHeight(0);return false;">加高</button>
                            <button class="btn" onclick="addWidth(1);return false;">减宽</button>
                            <button class="btn" onclick="addHeight(1);return false;">减高</button>
                        </div>
                        <img id="patientImage" data-for-template="patientImage" name="patientImage" src="#" class="img-responsive" alt="Cinque Terre" width="304" height="236">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="control-group">
                    <label class="control-label" for="diagTable">出院诊断</label>
                    <div class="controls">
                        <table id="diagTable" class="table table-striped table-bordered table-condensed">
                            <thead>
                                <tr>
                                    <th>类型</th>
                                    <th>病情</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyTemplate" data-for-template="tbodyTemplate">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
    <script th:inline="javascript">
        // 解析内容并渲染模板值
        parseContentAndRender();

        // 获取表单数据
        function getFormData() {
            var formData = $("#in-hospital-record-form").serializeJson();
            formData.diagType = selectSelects("diagType");
            formData.checkType = selectCheckedArray("checkType");
            formData.gender = selectRadioChecked("gender");
            formData.patientImage = selectImgData("patientImage");
            formData.tbodyTemplate = "todo";
            console.log("formData: ", formData)
            debugger
            return formData;
        }

        // 图片加/减宽
        function addWidth(type){
            var elementById = document.getElementById("patientImage");
            var width = elementById.width;
            if (type === 0){
                elementById.width = width + 5
            }else {
                elementById.width = width - 5
            }
        }

        // 图片加/减高
        function addHeight(type){
            var elementById = document.getElementById("patientImage");
            var height = elementById.height;
            if (type === 0){
                elementById.height = height + 5
            }else {
                elementById.height = height - 5
            }
        }
    </script>

</div>

</html>